<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=switch-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="{{ url_for('static',filename='js/mui.min.js')}}"></script>
		<link href="{{url_for('static',filename='css/mui.min.css')}}" rel="stylesheet" />
		<style >
			.r_desc{
				font-size : 10px;
				color: gray;
			}
			.s_desc{
				color: gray;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<!-- <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> -->
			<h1 class="mui-title">开关控制</h1>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view">
				{% for room in rooms%}
				<li class="mui-table-view-cell mui-collapse mui-active">
					<a class="mui-navigate-right" href="#">房间名：{{room.name}}</a>
					{% for switch in room.switchs%}
					<div class="mui-collapse-content">
						<p style="display: inline-block;">{{switch.name}}</p>
						<div s_id="{{switch.id}}" code="{{switch.code}}" class="mui-switch {% if switch.status==1 %}mui-active{% endif%} " style="float: right;">
							<div class="mui-switch-handle" style="float: right;"></div>
						</div>
						<input onclick="del_switch({{switch.id}})" style="float:right;margin: 0 10px;" type="button" value="删除" />
					</div>
					{% endfor %}
					<div class="mui-collapse-content" style="text-align:center">
						<button value="{{room.id}}" type="button" class="mui-btn add_switch" style="width:20%;color:gray;font-size:10px;">添加开关</button>
						<button value="{{room.id}}" type="button" class="mui-btn del_room" style="width:20%;color:gray;font-size:10px;">删除房间</button>
					</div>
				</li>
				{% endfor %}
				<li style="text-align:center;padding:5px;">
					<button id="addRoom" type="button" class="mui-btn" style="width:30%;">添加房间</button>
				</li>
			</ul>
		</div>
		<!-- 添加房间 -->
		<div id="add_room_dialog" class="mui-popover" style="padding : 10px;margin:0 10%;width:80%;bottom:20%;">
			<p style="width:100%;text-align:center">添加房间</p>
			<div class="mui-input-row">
				<label>名称</label>
				<input id="r_name" type="text" class="mui-input-clear" placeholder="请输入房间名">
			</div>
			<div class="mui-button-row">
				<button id="r_confirm" type="button" class="mui-btn mui-btn-primary">确认</button>
				<button id='r_cancel' type="button" class="mui-btn mui-btn-danger">取消</button>
			</div>
		</div>
		<!-- 添加开关 -->
		<div id="add_switch_dialog" class="mui-popover" style="padding : 10px;margin:0 10%;width:80%;">
			<p style="width:100%;text-align:center">添加开关</p>
			<div class="mui-input-row">
				<label>名称</label>
				<input id="s_name" type="text" class="mui-input-clear" placeholder="请输入开关名">
			</div>
			<div class="mui-input-row">
				<label>端口</label>
				<select id="s_port_id" class="mui-h5" style="margin: auto;">
					{% for sel_port in sel_ports%}
						<option value="{{sel_port.port_id}}">{{sel_port.node_ip}}-{{sel_port.port}}</option>
					{% endfor %}
				</select>
			</div>
			<div class="mui-button-row">
				<button id="s_confirm" type="button" class="mui-btn mui-btn-primary">确认</button>
				<button id='s_cancel' type="button" class="mui-btn mui-btn-danger">取消</button>
			</div>
			<input id="s_room_id" type="hidden"/>
		</div>
	</body>

</html>
<script type="text/javascript" charset="utf-8">
	mui.init();
	switchs = document.getElementsByClassName('mui-switch')
	for(var index = 0; index < switchs.length; index++) {
		switchs[index].addEventListener("toggle", function(event) {
			s_id = this.getAttribute('s_id')
			status = event.detail.isActive?1:0
			new Audio('static/voice/da.wav').play();
			mui.post('{{url_for('switch_toggle')}}',{s_id:s_id,status:status},function(data){
				if(data == -1){
					mui.toast('参数错误',{ duration:1000, type:'div' })
				}else if (data == 0){
					mui.toast('创建失败',{ duration:1000, type:'div' })
				}else{
					mui.toast('切换成功',{ duration:1000, type:'div' })
				}
			},'json');
		});
	}
	//添加房间
	mui('.mui-content').on('tap', '#addRoom', function(e) {mui('#add_room_dialog').popover('show');});
	mui('.mui-collapse-content').on('tap', '.del_room', function(e) {
		r_id = this.value;
		mui.confirm('','您确定要删除该房间吗？',['确认','取消'],function(event){
			if(event.index == 0){
				mui.post('{{url_for('del_room')}}',{r_id:r_id},function(data){
					if(data == -1){
						mui.toast('参数错误',{ duration:1000, type:'div' })
					}else if (data == 0){
						mui.toast('删除失败',{ duration:1000, type:'div' })
					}else{
						window.location.href = '{{url_for('rooms_config')}}'
					}
				},'json');
			}
		})
	});
	mui('.mui-popover').on('tap', '#r_confirm', function(e) {
		var r_name = document.getElementById('r_name').value;
		if(r_name == '')return
		mui.post('{{url_for('add_room')}}',{r_name:r_name},function(data){
			if(data == -1){
				mui.toast('参数错误',{ duration:1000, type:'div' })
			}else if (data == 0){
				mui.toast('创建失败',{ duration:1000, type:'div' })
			}else{
				window.location.href = '{{url_for('rooms_config')}}'
			}
		},'json');
    });
    mui('.mui-popover').on('tap', '#r_cancel', function(e) {mui('#add_room_dialog').popover('hide');});
    //添加开关
    mui('.mui-table-view-cell').on('tap', '.add_switch', function(e) {
			if(document.getElementById('s_port_id').children.length==0){
				mui.confirm('','没有物理设备可供添加，请先创建物理设备',['确认'],function(e){
				})
				return;
			}
    	document.getElementById('s_room_id').value=this.value
		mui('#add_switch_dialog').popover('show');//show hide toggle
    });
    mui('#add_switch_dialog').on('tap', '#s_confirm', function(e) {
    	params = {}
    	params.s_name = document.getElementById('s_name').value
    	if(params.s_name == '')return;
		params.s_port_id = document.getElementById('s_port_id').value
    	params.s_room_id = document.getElementById('s_room_id').value
    	mui.post('{{url_for('add_switch')}}',params,function(data){
				if(data == -1){
					mui.toast('参数错误',{ duration:1000, type:'div' })
				}else if (data == 0){
					mui.toast('创建失败',{ duration:1000, type:'div' })
				}else{
					window.location.href = '{{url_for('rooms_config')}}'
				}
			},'json');
    });
    mui('#add_switch_dialog').on('tap', '#s_cancel', function(e) {mui('#add_switch_dialog').popover('hide');});
	function del_switch(id){
		mui.confirm('','您确定要删除当前开关吗？',['确认','取消'],function(e){
			if(e.index==0){
				mui.post('{{url_for('del_switch')}}',{s_id:id},function(data){
					if(data == -1){
						mui.toast('参数错误',{ duration:1000, type:'div' })
					}else if (data == 0){
						mui.toast('删除失败',{ duration:1000, type:'div' })
					}else{
						window.location.href = '{{url_for('rooms_config')}}'
					}
				},'json');
			}
		})
	}
</script>
